<template>
    <div class="top">
        <div @click="changeDark" class="icon">
            <el-icon size="30" v-if="dark"><MoonNight /> </el-icon>
            <el-icon size="30" v-if="!dark"> <Sunny /> </el-icon>
        </div>
        <div>
            <el-button class="bottom" mb-2 @click="toggle">{{ language }}</el-button>
            <el-dropdown placement="bottom">
                <el-button class="bottom"> {{ $t('indexView.fontChoose') }} </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="modifyFont('youyuan, sans-serif')">{{ $t('indexView.youyuan') }}</el-dropdown-item>
                        <el-dropdown-item @click="modifyFont('cute, sans-serif')">{{ $t('indexView.cute') }}</el-dropdown-item>
                        <el-dropdown-item @click="modifyFont('pixel, sans-serif')">{{ $t('indexView.pixel') }}</el-dropdown-item>
                        <el-dropdown-item @click="modifyFont('pinyin, sans-serif')">{{ $t('indexView.pinyin') }}</el-dropdown-item>
                        <el-dropdown-item @click="modifyFont('rosyClouds, sans-serif')">{{ $t('indexView.rosyClouds') }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>

        <div class="tips"><el-text>{{ $t('textView.tips') }}</el-text></div>

        <div class="time">
            <h1>{{ $t('textView.a1') }}{{ Math.floor(examProblem?.remainingTime/60)}}{{ $t('textView.a2') }}{{ examProblem?.remainingTime%60 }}{{ $t('textView.a3') }}</h1>
        </div>
        <div class="submit"><el-button class="submit-bottom" type="danger" plain @click="open">{{ $t('textView.submit') }}<el-icon><Select /></el-icon></el-button></div>
    </div>

    <el-container>
        <TestingProblemView  :testProblem="examProblem" :testId="examId" :submit="submit"></TestingProblemView>
    </el-container>

</template>


<script setup lang="ts">
    import useLanguage from '@/hooks/useLanguage';
    
    import { onMounted ,onUnmounted,ref} from 'vue';
    import useDark from '@/hooks/useDark';
    import useExaming from '@/hooks/useExaming';
    import TestingProblemView from '@/views/test/son/testingProblemView.vue'
    import { ElMessage, ElMessageBox } from 'element-plus';
    import router from '@/router';
    const prop=defineProps(['examId'])
    const { language,toggle,modifyFont } = useLanguage();
    const { dark, changeDark } = useDark();
    const {examProblem,getExamProblemList}=useExaming()
    const submit=ref<number>(0);
    let timer;
    onMounted(async()=>{
        await getExamProblemList(prop.examId)
        timer=setInterval(()=>{
            examProblem.value.remainingTime--;
            if(examProblem.value.remainingTime<=0){
                ElMessage({
                    message:`考试已结束`,
                    grouping:true,
                    type:'error'
                })
                router.push("/home")
            }
        },1000)
    })

    const open=()=>{
        ElMessageBox.confirm(
            '提交后将结束测验，您确定要提交吗?',
            'Warning',
            {
                confirmButtonText: '提交',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(()=>{
            submit.value++
        })
    }

    onUnmounted(()=>{
        clearInterval(timer)
    })
</script>


<style scoped>

.top {
    display: flex;
    gap: 1%;
}
.icon {
        margin-top: 16px;
        margin-left: 15px;
        float: left;
        cursor: pointer;
        /* 改变鼠标指针样式 */
        transition: color 0.3s ease;
    }
    .bottom{
        font-family: inherit;
        width: 90px; 
        height: 40px; 
        margin-top: 10px; 
        margin-left: 5px; 
    }

    .icon:hover {
        color: lightcoral;
    }

    .time{
        width: 680px;
        margin-left: 5%;
        font-size: 16px;
        margin-top: -5px;
    }


    .submit-bottom{
            height: 50px;
            width: 100px;
            margin-top: 10px;
        }
    .tips{
        margin-top: 40px;
        margin-left: 50px;
    }
</style>